<template>
  <a-drawer>
    <a-form :mode="menuFormModel">
      <a-form-item label="菜单标题" field="locale">
        <a-input v-model="menuFormModel.locale"></a-input>
      </a-form-item>
      <a-form-item label="菜单名称" field="name">
        <a-input v-model="menuFormModel.name"></a-input>
      </a-form-item>
      <a-form-item label="父级菜单" field="parentId">
        <a-select v-model="menuFormModel.parentId"></a-select>
      </a-form-item>
      <a-form-item label="菜单路径" field="path">
        <a-input v-model="menuFormModel.path"></a-input>
      </a-form-item>
      <a-form-item label="组件地址" field="component">
        <a-input v-model="menuFormModel.component"></a-input>
      </a-form-item>
      <a-form-item label="菜单图标" field="icon">
          <SelectIcon v-model="menuFormModel.icon"></SelectIcon>
      </a-form-item>
      <a-form-item label="隐藏菜单" field="hideInMenu">
        <a-switch v-model="menuFormModel.hideInMenu" />
      </a-form-item>
      <a-form-item label="强制单项" field="hideChildrenInMenu">
        <a-switch v-model="menuFormModel.hideChildrenInMenu" />
      </a-form-item>
      <a-form-item label="菜单排序" field="order">
        <a-input-number v-model="menuFormModel.order"></a-input-number>
      </a-form-item>
      <a-form-item label="显示标签" field="affix">
        <a-switch v-model="menuFormModel.affix" />
      </a-form-item>
      <a-form-item label="是否缓存" field="ignoreCache">
        <a-switch v-model="menuFormModel.ignoreCache" />
      </a-form-item>
    </a-form>
  </a-drawer>
</template>
<script lang="ts" setup>
defineOptions({
  name: 'AddEditDrawer', // 添加以及修改菜单抽屉
});
import { ref } from 'vue';
import { generateMenuFormModel } from '@/views/system/menu/index';
import SelectIcon from '@/components/select-icon.vue';
const menuFormModel = ref(generateMenuFormModel());
</script>
